import { getItem } from '@hs-admin/utils'
import { Layout, Menu } from 'antd'
import React, { useEffect, useState } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'

const { Content, Sider } = Layout

// 请注意：如果不需要权限控制，那么把那一项的permission设为空字符串
const allMenus = [{ label: '数据导出审批', key: '/approval/export', permission: 'sg.export.audit' }]

const Approval: React.FC = () => {
  const [menuItems, setMenuItems] = useState<Array<{ label: string; key: string; permission: string }>>([])
  const navigate = useNavigate()

  const loca = useLocation()

  const [current, setCurrent] = useState('')

  useEffect(() => {
    const permissions = getItem('PERMISSIONS_OPERATE') ?? []
    permissions.push('')
    const menus = allMenus.filter((it) => permissions.includes(it.permission))
    setMenuItems(menus)
    if (menus.length && location.pathname === '/operate/approval') {
      setCurrent(menus[0].key)
      navigate(menus[0].key)
    }
  }, [])

  useEffect(() => {
    setCurrent(loca.pathname.replace('/operate', ''))
  }, [loca.pathname])

  return (
    <Layout>
      <Sider breakpoint="lg" collapsedWidth="0" theme="light" className="overflow-auto">
        <Menu selectedKeys={[current]} items={menuItems} />
      </Sider>
      <Layout className="overflow-hidden">
        <Content className="m4 p4 bg-white flex flex-col gap-4 overflow-hidden">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}

export default Approval
